<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>Information</title>
</head>
<body>

	<script type="text/javascript">
		// <![CDATA[
		function callInput(idInput, whereId) {
			call("services/resource/query/" + $(idInput).val(), whereId);
		}

		function call(url, whereId) {
			$
					.ajax({
						type : "GET",
						url : url,
						error : function(msg) {
							console.log(msg);
							$("#" + whereId).text(msg.statusText);
						},
						success : function(data) {
							var myTable = $("<table border='1'/>");
							var myThead = $("<thead></thead>");
							var myTr = $("<tr></tr>")
							myThead.append(myTr);
							myTable.append(myThead);
							//affiche le contenu du fichier dans le conteneur dédié
							$.each(data.resultat.column, function(key, value) {
								var myTh = $("<th></th>");
								myTh.text(value);
								myTr.append(myTh);
							});

							$.each(data.resultat.row, function(key, value) {
								var myTr = $("<tr></tr>");
								$.each(value.column, function(key, value) {
									var myTd = $("<td></td>");
									if (value["@xsi.nil"] == "true") {
										myTd.text('NULL');
									} else {
										myTd.text(value.$);
									}

									myTr.append(myTd);
								});
								myTable.append(myTr);
							});
							$("#" + whereId).empty();
							$("#" + whereId).append(myTable);
						}
					});

		}
		// ]]>
	</script>
	<div>
		<form action="javascript:callInput('#idInput', 'whereIPutMyDynamic');">
			<input type="text" list="requete" size="90%" id="idInput"  value="query?dqsdqsd=dfd" /><input
				type="submit" value="Go"
				 />
		</form>
		<datalist id="requete">
			<option value="query?dqsdqsd=dfd">Query</option>
			<option value="queryNotExist?dqsdqsd=dfd">queryNotExist</option>
			<option value="queryError?name7=dds">queryError</option>
		</datalist>
		<h3>Tableau dynamique</h3>
		<div id="whereIPutMyDynamic"></div>

	</div>
</body>
</html>